<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:c="http://xmlns.jcp.org/jsf/composite"
	xmlns:p="http://primefaces.org/ui">

<ui:decorate template="/jsp/WEB/pageLayout.xhtml">
	<ui:define name="centro">

		<style>
.alignTop td {
	vertical-align: top;
}

.customTxtWidth200px .ui-inputfield .ui-inputtext .ui-widget {
	width: 200px !important;
}
</style>
		<h:form id="form">
			<p:growl id="msgs" showDetail="true" />

			<p:panel header="Cadastro de Detalhamento de Produto">
				<f:facet name="actions">
					<h:commandLink
						styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"
						title="Ajuda" onclick="dlg.show(); return false;">
						<h:outputText styleClass="ui-icon ui-icon-help" />
					</h:commandLink>
				</f:facet>

				<p:dialog header="Ajuda" widgetVar="dlg">
					<h:outputText value="#{CadDetalhaProdBean.help}" escape="false" />
				</p:dialog>

				<!-- ************************************************************************ -->
				<!-- ** Grid Principal - Tree / detail -->
				<!-- ************************************************************************ -->
				<h:outputText
					value="1-Selecione a categoria para adicionar ou atualizar um subitem ou vá para o passo 2 para criar uma nova categoria." />
				<h:panelGrid columns="2" cellpadding="5"
					styleClass="top-aligned-columns">

					<p:tree value="#{CadDetalhaProdBean.root}" var="node"
						dynamic="false" selectionMode="single" expandAnim="FADE_IN"
						collapseAnim="FADE_OUT"
						selection="#{CadDetalhaProdBean.selectedNode}">
						<p:treeNode>
							<h:outputText value="#{node.getDescription()}" />
						</p:treeNode>
					</p:tree>

					<h:panelGrid columns="4" cellpadding="5"
						columnClasses="alignTop,alignTop">

						<p:outputLabel value="2-Adicione uma descrição: " />
						<p:inputText value="#{CadDetalhaProdBean.menuNewName}"
							styleClass="customTxtWidth200px" />

						<p:commandButton value="Adicionar" update="@form"
							action="#{CadDetalhaProdBean.menuAdd()}" icon="ui-icon-plusthick"
							style="margin-left:50%">
						</p:commandButton>
					</h:panelGrid>

				</h:panelGrid>

				<p:separator style="margin-top:3%" />

				<!-- ************************************************************************ -->
				<!-- ** Dados dos detalhamentos -->
				<!-- ************************************************************************ -->
				<p:fieldset legend="Relatório de Detalhamento de Produto " toggleable="true" toggleSpeed="500">
				<p:ajax event="toggle"/>
				<h:outputText value="Para alterar ou excluir o detalhamento, basta clicar em um dos ícones no relatório abaixo." />
				<p:dataTable id="tabelaDetail" value="#{CadDetalhaProdBean.rel}"
					var="detail" rowIndexVar="rowIndex"
					emptyMessage="Nenhum registro encontrado"
					style="margin-top:30px; position: auto" paginator="true" rows="50">
					<p:column style="width: 50%;" sortBy="descCat">
						<f:facet name="header">Categoria</f:facet>
						<h:outputText value="#{detail.descCat}" />
					</p:column>
					<p:column style="width: 50%;" sortBy="descricao">
						<f:facet name="header">Detalhamento</f:facet>
						<h:outputText value="#{detail.descricao}" />
					</p:column>
					<p:column style="width: 50%;">
						<f:facet name="header">Status</f:facet>
						<h:outputText value="Ativo" rendered="#{detail.ativo}" />
						<h:outputText value="Inativo" rendered="#{not detail.ativo}" />
					</p:column>

					<p:column style="width: 80px;">
						<p:commandButton value="Excluir" update="tabelaDetail"
							onclick="confirmaExclusao.show()" icon="ui-icon-minus">
							<f:setPropertyActionListener value="#{detail}"
								target="#{CadDetalhaProdBean.detail}" />
						</p:commandButton>
					</p:column>
					<p:column style="width: 80px;">
						<p:commandButton value="Alterar" update=":form1"
							title="Alterar este detalhamento"
							oncomplete="PF('detalhaDialog').show()" icon="ui-icon-pencil"
							action="#{CadDetalhaProdBean.selecionaDetail}">
							<f:setPropertyActionListener value="#{detail}"
								target="#{CadDetalhaProdBean.detail}" />
						</p:commandButton>
					</p:column>
				</p:dataTable>
				</p:fieldset>
			</p:panel>
		</h:form>

		<!-- ************************************************************************ -->
		<!-- ** Dialog para alterar item selecionado do Grid de detalhamento **-->
		<!--*********************************************************************** -->

		<h:form id="form1">
			<p:dialog id="detalhaDlg" widgetVar="detalhaDialog" resizable="false"
				showEffect="fade" hideEffect="explode"
				header="Informações de detalhamento de produto">

				<p:panelGrid columns="2" cellpadding="4" style="border: 0px;">
					<h:outputText value="Descrição do Detalhamento "
						styleClass="dlgTitulo" />
					<h:inputText value="#{CadDetalhaProdBean.detail.descricao}"
						style="width:50%" />

					<h:outputText value="Status" styleClass="dlgTitulo" />
					<p:selectBooleanCheckbox value="#{CadDetalhaProdBean.detail.ativo}" />
				</p:panelGrid>

				<p:panel style="border:0px;margin-top:2%;margin-left:70%">
					<p:commandButton value="Salvar" update="@all" ajax="false"
						action="#{CadDetalhaProdBean.menuUpdate()}" icon="ui-icon-disk" />
				</p:panel>
			</p:dialog>
		</h:form>

		<p:confirmDialog id="confirmaExclusao"
			message="Confirma exclusão do Detalhamento?" header="Confirmação"
			severity="alert" widgetVar="confirmaExclusao" modal="true"
			appendTo="@(body)">
			<h:form>
				<p:commandButton id="confirmaBtn" value="Sim"
					onclick="confirmaExclusao.hide()"
					action="#{CadDetalhaProdBean.menuDelete()}" ajax="false"
					icon="ui-icon-check">
				</p:commandButton>
				<p:commandButton id="recusaBtn" value="Não"
					onclick="confirmaExclusao.hide()" icon="ui-icon-close" />
			</h:form>
		</p:confirmDialog>

	</ui:define>
</ui:decorate>
</html>
